<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./jquery-1.8.3.min.js"></script>
</head>
<body>
	<h1>请选择您的地址</h1>
	<select id="pro"></select>
	<select id="city"></select>
	<select id="area"></select>
	<select id="street"></select>

	<script>
		//获取省份信息
		$.ajax({
			type:'get',
			url:'./address2.php',
			success:function(data){
				console.log(data);
				//先清空原先的数据
				//遍历省份数据
				for(var i = 0; i<data.length;i++){
					$('<option value="'+data[i].id+'">'+data[i].name+'</option>').appendTo('#pro');
				}
			},
			dataType:'json',
			async:false,//同步!!!!!!!!!
		})

		//绑定事件
		$('#pro,#city,#area').change(function(){
			//获取当前的vale值
			var upid = $(this).val();
			// console.log(upid);
			//一触发change事件,就清空后面所有的数据
			$(this).nextAll('select').show().empty();
			//保留$(this)变量
			var _this = $(this);
			//console.log($(this));

			//请求下一级数据
			$.ajax({
				type:'get',
				url:'./address.php',
				data:"upid="+upid,
				success:function(data){
					//如果下一级没数据，就隐藏后面的下拉框
					if(!data){
						_this.nextAll('select').hide();
						return;
					};
					// console.log(data);
					//填充下一级的数据
					for(var i = 0; i<data.length;i++){
						$('<option value="'+data[i].id+'">'+data[i].name+'</option>').appendTo(_this.next('select'));
					}
					//自动触发后面的select的change事件
					_this.next('select').trigger('change');
				},
				dataType:'json',
			})
		})
		//自动加载省份的change事件
		$('#pro').trigger('change');


	</script>
</body>
</html>